@prefix: bill-templates;
@border-color: #ddd;
@background-color: #f2f2f2;
@border-blue: #40a9ff;

.@{prefix} {
  // 防止 业务 里的 box-sizing 影响组件的 border-box 
  box-sizing: border-box;

  .container-set {
    display: flex;
    justify-content: space-between;
  }

  .form-action {
    margin-top: 20px;

    .ant-btn {
      margin-right: 16px;
    }
  }
  // 表单预览font_style需要提供的样式：大小、粗细、对齐 
  .cell-font {
    &-sm {
      font-size: 12px;

      &.cell-font-bold {
        text-shadow: 1px 0 0 #000;
      }
    }

    &-md {
      font-size: 24px;

      &.cell-font-bold {
        text-shadow: 1px 0 0 #000;
      }
    }

    &-lg {
      font-size: 36px;

      &.cell-font-bold {
        text-shadow: 1px 0 0 #000;
      }
    }
  }

  .row-white {
    margin-bottom: 0;
  }

  .left-content {
    flex: none;
    background: @background-color;
    padding: 16px;
    margin-right: 16px;

    .title {
      padding-left: 120px;
      text-align: center;
    }

    .content {
      display: flex;
    }
  }
  // 组件样式写到这里 
  &-title {
    font-size: 28px;
  }
  // ========内容配置区样式======== 
  .content-config {
    flex: auto;

    .block {
      border-bottom: 1px dashed @border-color;
      margin-bottom: 16px;

      .ant-form-item-control {
        border: 1px solid @border-color;
        padding: 8px 0 0 8px;
        border-radius: 4px;
      }
    }

    .row-config {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      clear: both;

      .list-row {
        clear: both;
        display: flex;
      }

      .cell-config {
        flex: none;
        width: 25%;
      }
    }

    .row-config-padding-1 {
      padding-left: 16px;
    }

    .row-config-padding-2 {
      padding-left: 32px;
    }

    .row-config-padding-3 {
      padding-left: 48px;
    }

    .row-config-padding-4 {
      padding-left: 64px;
    }
  }

  // ========票据预览样式========= 
  .bill-preview-container {
    flex: none;
    width: 366px;
    margin-left: 16px;
  }

  .bill-preview {
    .ant-card {
      font-size: 12px;
    }

    .row {
      display: flex;
      justify-content: flex-start;

      .cell {
        flex: none;
        word-break: break-all;
        font-family: monospace;
        border: 1px dashed #fff;
        box-sizing: border-box;
      }
    }

    .cell-image {
      img {
        width: 100%;
        height: auto;
      }
    }

    .cell-active {
      border: 1px dashed @border-blue !important;
    }
  }
  // ========样式编辑样式======== 
  .style-editor {
    width: 130px;
    position: relative;

    .slide-set {
      position: absolute;
      top: 0;
      left: 0;

      .ant-card-body {
        min-height: 120px;
      }
    }

    .block {
      border-bottom: 1px dashed @border-color;
      margin: 0 8px 16px;

      &:last-child {
        border-bottom: none;
      }
    }

    .dl-btn-action {
      margin-top: 8px;
    }

    .dt-btn-action {
      font-weight: 600;
      color: #666;
    }

    .dd-btn-action {
      margin-top: 2px;

      .ant-btn {
        margin-right: 4px;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .ant-card-head-title {
      padding: 8px 0;
    }

    .ant-card-body {
      padding: 0;
    }

    .ant-alert-message {
      font-size: 8px;
    }

    .ant-alert {
      padding: 6px 2px 6px 18px;
    }

    .ant-alert-icon {
      left: 3px;
    }

    .ant-form-item {
      // padding: 0 8px; 
      margin-bottom: 8px;
    }

    .ant-btn-link {
      padding: 0;
    }
  }
}
